<template>
    <div class="help-detail" v-if="info.id">
        <top-bar :isBlack="true" title="问题详情"></top-bar>
        <div class="question-wrapper">
            <div class="question">
                <div class="title-bar">
                    <p class="label">问题：</p>
                    <p class="type">{{ info.cate.title }}</p>
                </div>
                <p class="question-desc">
                    {{ info.title }}
                </p>
                <div class="status-wrapper">
                    <p class="time">{{ info.created_at }}</p>
                    <p class="status" :class="{ already: info.status }">
                        {{ info.status ? "已回复" : "待回复" }}
                    </p>
                </div>
            </div>
        </div>
        <div class="reply-wrapper" v-if="info.reply">
            <p class="reply-label">回复：</p>
            <p class="reply-desc">
                {{ info.reply }}
            </p>
        </div>
        <div class="btn-wrapper">
            <van-button color="#224448" block @click="goReturn">返回</van-button>
        </div>
    </div>
</template>

<script>
import TopBar from "@/components/topBar.vue";
export default {
    name: "helpDetail",
    data() {
        return {
            info: null,
        };
    },
    mounted() {
        this.info = JSON.parse(this.$route.query.info);
    },
    methods: {
        goReturn() {
            this.$router.go(-1);
        },
    },
    components: {
        TopBar,
    },
};
</script>

<style lang="scss">
.help-detail {
    .van-button {
        height: 54px;
    }
    .van-button--normal {
        font-size: 16px;
    }
}
</style>
<style lang="scss" scoped>
.help-detail {
    height: 100vh;
    z-index: 9;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    padding-bottom: 56px;
    .question-wrapper {
        background-color: #f4f4f4;
        padding: 10px 0;
        .question {
            background-color: #fff;
            padding-bottom: 20px;
            .title-bar {
                background-color: #224448;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 15px;
                height: 40px;
                .label {
                    font-size: 14px;
                    font-weight: bold;
                    color: #ffffff;
                }

                .type {
                    font-size: 13px;
                    font-weight: 500;
                    color: #ffffff;
                }
            }

            .question-desc {
                padding: 18px 23px 10px 16px;
                font-size: 13px;
                color: #333333;
                line-height: 20px;
                word-break: break-all;
            }

            .status-wrapper {
                padding: 0 15px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .time {
                    font-size: 13px;
                    color: #333333;
                }

                .status {
                    color: #e8542c;
                    &.already {
                        color: #b4b4b4;
                    }
                    font-size: 14px;
                }
            }
        }
    }

    .reply-wrapper {
        padding: 0 15px;
        .reply-label {
            line-height: 54px;
            font-size: 14px;
            font-weight: bold;
            color: #333333;
            border-bottom: 1px solid #f4f4f4;
        }

        .reply-desc {
            font-size: 13px;
            color: #333333;
            line-height: 20px;
            padding-right: 10px;
            word-break: break-all;
            padding-top: 18px;
        }
    }
    .btn-wrapper {
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
    }
}

@media screen and (min-width: 750px) {
    .help-detail {
        width: 750px;
        left: 50%;
        transform: translateX(-50%);

        .question-wrapper {
            .question {
                .title-bar {
                    .label {
                        font-size: 20px;
                    }

                    .type {
                        font-size: 20px;
                    }
                }
                .question-desc {
                    font-size: 20px;
                }
                .status-wrapper {
                    .time {
                        font-size: 18px;
                    }

                    .status {
                        font-size: 18px;
                    }
                }
            }
        }

        .reply-wrapper {
            .reply-label {
                font-size: 20px;
            }

            .reply-desc {
                font-size: 19px;
            }
        }
    }
}
</style>
